<template>
  <el-container>
    <el-main>
      <h2>第N次上课签到</h2>
      <span>2021-10-23 20:56:54</span>
      <span class="delete-title">一键签到</span>
      <el-popconfirm @confirm="pop" title="确定删除吗？">
        <el-button
          slot="reference"
          type="danger"
          icon="el-icon-delete"
          plain
          circle
        ></el-button>
      </el-popconfirm>
    </el-main>
    <el-aside>
      <el-button circle @click="signUp">发布</el-button>
    </el-aside>
  </el-container>
</template>

<script>
export default {
  name: '',
  props: {},
  components: {},
  data () {
    return {}
  },
  methods: {
    // 用户确认是否签到
    signUp () {
      this.$confirm('是否发布', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          // 发布成功
          this.$message({
            type: 'success',
            message: '发布成功'
          })
        })
        .catch(() => {
          // 签到失败
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
    },
    // 删除处理
    pop () {
      this.$message({
        type: 'success',
        message: '删除成功'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 10px;
  .el-main {
    padding: 10px 20px;
    position: relative;
    span {
      margin: 0 50px;
    }
    .delete-title{
      position: absolute;
      top: 60px;
      left: 180px;
    }
  }
  .el-aside {
    position: relative;
    padding: 10px 20px;
    .el-button {
      position: absolute;
      background-color: rgb(250, 205, 145);
      top: 50%;
      left: 50%;
      margin-top: -10%;
      width: 25%;
      height: 50%;
      color: red;
    }
  }
}
</style>
